<template>
  <div class="serach">
    <div class="serach_title">
      <h1>{{$route.query.value}}</h1>
      <span v-if="activeName=='1'">找到{{conunt}}个结果</span>
      <span v-if="activeName=='1000'">找到{{songList.playlistCount}}个结果</span>
      <span v-if="activeName=='1004'">找到{{mvlists.mvCount}}个结果</span>
    </div>
    <div class="serach_tab">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="歌曲" name="1">
          <div>
            <div class="serach_tab_title">
              <span>音乐标题</span>
              <span>歌手</span>
              <span>专辑</span>
              <span>时长</span>
            </div>
            <div
              class="serach_tab_content"
              v-for="(item,index) in listSongs"
              :key="index"
              @click="musicPlayAxios(index)"
            >
              <span>{{index+1}}</span>
              <div class="serach_tab_content_bt">
                <span>
                  {{item.name}}
                  <span
                    class="el-icon-video-camera"
                    v-if="item.mvid"
                    style="color:#a00; display: inline;"
                  ></span>
                  <span v-else></span>
                </span>
                <span v-if="item.alias[0]">{{item.alias[0]}}</span>
                <span v-else>此歌曲暂无别名</span>
              </div>
              <div class="singsong">{{item.artists[0].name}}</div>
              <div class="title">{{item.album.name}}</div>
              <div class="time">{{item.duration}}</div>
            </div>
            <!-- 分页 -->
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :current-page="page"
              :page-size="10"
              @current-change="currentClick"
              class="centers"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="歌单" name="1000">
          <div class="songList" v-if="songList.playlists">
            <div
              class="songList_main"
              v-for="(item,index) in songList.playlists"
              :key="index"
              @click="singsDetailClick(item.id)"
            >
              <div class="songList_icon">
                <span>{{item.playCount}}</span>
                <img :src="item.coverImgUrl" width="160px" />
              </div>
              <div class="songList_title">{{item.name}}</div>
            </div>
          </div>
          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page="page"
            :page-size="10"
            @current-change="currentSingClick"
            class="centers"
          ></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="MV" name="1004">
          <div class="mv">
            <div class="mv_main" v-for="(item,index) in mvlists.mvs" :key="index">
              <div class="mv_main_icon">
                <span class="mv_main_icon_const">{{item.playCount}}</span>
                <div class="el-icon-video-play play"></div>
                <img :src="item.cover" alt />
                <div class="mv_main_time">{{item.duration}}</div>
              </div>
              <div class="mv_main_title">
                <div>{{item.name}}</div>
                <div style="color:#ccc;font-size:12px;">{{item.artistName}}</div>
              </div>
            </div>
          </div>
          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page="page"
            :page-size="10"
            @current-change="currentmvClick"
            class="centers"
          ></el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "1",
      // 歌曲
      listSongs: null,
      mvlists: {},
      // 歌单
      songList: {},
      conunt: 0,
      total: 1,
      page: 1,
    };
  },
  watch: {
    activeName() {
      this.serachAxios();
    },
    $route() {
      if (this.$route.query != this.listSongs.name) {
        this.serachAxios();
      }
    },
  },
  methods: {
    handleClick(val) {},
    // 搜索获取数据
    serachAxios() {
      this.$http({
        url: "/search",
        method: "get",
        params: {
          // 搜索的关键字
          keywords: this.$route.query.value,
          // 数据传回来的数据条数
          limit: +this.activeName == 1004 ? "12" : "10",
          offset: (this.page - 1) * 10,
          type: +this.activeName,
        },
      }).then((res) => {
        // 歌曲
        if (+this.activeName == 1) {
          this.listSongs = res.data.result.songs;
          for (let i = 0; i < this.listSongs.length; i++) {
            let c = this.listSongs[i].duration;
            // 秒 c /1000
            // 分 c/1000/60
            let d = parseInt(c / 1000 / 60);
            let f = parseInt((c / 1000) % 60);
            d = d < 10 ? "0" + d : d;
            f = f < 10 ? "0" + f : f;
            this.listSongs[i].duration = `${d}分${f}秒`;
          }
          if (res.data.result.songCount != this.total) {
            this.page = 1;
          }
          // 总条数
          this.conunt = res.data.result.songCount;
          this.total = res.data.result.songCount;
        } else if (+this.activeName == 1000) {
          // 歌单
          this.songList = res.data.result;
          for (let i = 0; i < res.data.result.playlists.length; i++) {
            const playCount = res.data.result.playlists[i].playCount;
            if (playCount > 10000) {
              this.songList.playlists[i].playCount =
                (playCount / 10000).toFixed(2) + "W";
            }
          }
          if (res.data.result.playlistCount != this.total) {
            this.page = 1;
          }
          this.total = res.data.result.playlistCount;
        } else if (+this.activeName == 1004) {
          // MV
          this.mvlists = res.data.result;
          // 处理播放数量 处理播放的分钟
          for (let i = 0; i < res.data.result.mvs.length; i++) {
            // 播放数量
            const mvs = res.data.result.mvs[i].playCount;
            // 播放的分钟
            const mint = res.data.result.mvs[i].duration;
            if (mvs > 10000) {
              this.mvlists.mvs[i].playCount = (mvs / 10000).toFixed(2) + "W";
            }
            let m = parseInt(mint / 1000 / 60);
            let s = parseInt((mint / 1000) % 60);
            m = m < 10 ? "0" + m : m;
            s = s < 10 ? "0" + s : s;

            this.mvlists.mvs[i].duration = m + ":" + s;
          }
          // 分页
          if (res.data.result.mvCount != this.total) {
            this.page = 1;
          }
          this.total = res.data.result.mvCount;
        }
      });
    },
    // 重新获取数据 歌曲
    currentClick(val) {
      this.page = val;
      // 重新获取一遍数据
      this.serachAxios();
    },
    // 重新获取数据 歌曲
    currentSingClick(val) {
      this.page = val;
      // 重新获取一遍数据
      this.serachAxios();
    },
    // 重新获取数据 mv
    currentmvClick(val) {
      this.page = val;
      // 重新获取一遍数据
      this.serachAxios();
    },
    // 播放音乐
    musicPlayAxios(val) {
      this.$http({
        method: "get",
        url: "/song/url",
        params: {
          id: this.listSongs[val].id,
        },
      }).then((res) => {
        this.$parent.$parent.musicUrl = res.data.data[0].url;
        this.$parent.$parent.singname = this.listSongs[val].name;
      });
    },
    // 点击跳转到歌单详情页面
    singsDetailClick(id) {
      this.$router.push({
        path: "/palylist",
        query: {
          id,
        },
      });
    },
  },
  created() {
    this.serachAxios();
  },
};
</script>

<style lang="less" scoped>
.serach {
  width: 1000px;
  margin: 0 auto;
  .serach_title {
    margin: 20px 5px;
    display: flex;
    > span {
      margin-top: 13px;
      margin-left: 10px;
      font-size: 12px;
      color: rgba(204, 195, 196, 0.5);
    }
  }
  .serach_tab_title {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
    font-size: 13px;
    color: rgba(204, 195, 196, 0.8);
    margin-bottom: 20px;
  }
  .serach_tab_content {
    margin-top: 10px;
    height: 60px;
    width: 1000px;
    display: flex;
    align-items: center;
    border-radius: 15px;
    cursor: pointer;
    > span {
      width: 100px;
      height: 60px;
      text-align: center;
      line-height: 60px;
      font-size: 15px;
      font-weight: 550;
    }
    .serach_tab_content_bt {
      width: 200px;
      height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      margin-right: 80px;
      span {
        display: block;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      span:nth-child(2) {
        color: #ccc;
      }
    }
    .singsong {
      width: 100px;
      height: 60px;
      line-height: 60px;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: 140px;
    }
    .title {
      width: 160px;
      height: 60px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 60px;
      text-align: center;
      margin-right: 90px;
    }
    .time {
      width: 100px;
      height: 60px;
      line-height: 60px;
      text-align: center;
    }
  }
  .serach_tab_content:hover {
    background-color: rgb(247, 238, 240);
  }
}
.centers {
  text-align: center;
  margin: 20px 0 80px 0;
}
.songList {
  width: 1000px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .songList_main {
    width: 160px;
    height: 200px;
    display: flex;
    flex-wrap: wrap;
    margin: 10px 20px;
    cursor: pointer;
    .songList_icon {
      width: 160px;
      height: 160px;
      display: flex;
      position: relative;
      span {
        position: absolute;
        height: 20px;
        width: 160px;
        background-color: rgba(122, 117, 117, 0.2);
        color: #fff;
        text-align: right;
        padding-right: 5px;
        box-sizing: border-box;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        display: none;
      }
      img {
        width: 160px;
        height: 160px;
      }
    }
    .songList_icon:hover span {
      display: block;
    }
    .songList_title {
      color: #000;
      width: 160px;
      height: 20px;
      display: block;
      font-size: 13px;
      margin: 5px 4px;
    }
  }
}
.mv {
  width: 1000px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .mv_main {
    width: 230px;
    height: 200px;
    margin: 20px 10px;
    cursor: pointer;
    .mv_main_icon {
      width: 230px;
      position: relative;
      img {
        width: 230px;
        height: 160px;
        object-fit: cover;
      }
      span {
        position: absolute;
        width: 230px;
        height: 20px;
        text-align: right;
        box-sizing: border-box;
        padding-right: 10px;
        color: #fff;
        font-size: 13px;
        display: none;
      }
      .play {
        width: 230px;
        height: 160px;
        position: absolute;
        text-align: center;
        line-height: 160px;
        font-size: 50px;
        color: #fff;
        background-color: rgba(122, 117, 117, 0.2);
        display: none;
      }
      .mv_main_time {
        display: block;
        position: absolute;
        bottom: 2px;
        right: 2px;
        color: #fff;
      }
    }
    .mv_main_icon:hover div,
    .mv_main_icon:hover span {
      display: block;
    }
    .mv_main_title {
      width: 230px;
      color: #000;
      font-size: 13px;
      margin: 10px 3px;
    }
  }
}
</style>